import { View, Text, Image } from '@tarojs/components'
import { AtList, AtListItem, AtButton } from 'taro-ui'
import Taro from '@tarojs/taro'
import styles from './index.less'
import { useEffect } from 'react'
import { inject, observer } from 'mobx-react';
import type { UserStore } from '@/store/types';

const defaultUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'


const Profile = inject('userStore')(observer(({ userStore }: { userStore: UserStore }) => {
  useEffect(() => {

  }, [])
  const handleLogout = () => {
    Taro.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: (res) => {
        if (res.confirm) {
          userStore.logOut();
        }
      }
    })
  }

  const handleLogin = () => {
    if (userStore.isLogin) {
      return;
    }
    Taro.navigateTo({
      url: '/pages/login/index'
    })
  };

  const handleGetUserProfile = () => {
    // 请求用户授权，获取头像和昵称
    Taro.getUserProfile({
      desc: '用于完善用户信息', // 提示用户授权用途
      success: function (res) {
        console.log(res, 'getUserProfile');

      },
      fail: function (error) {
        console.error("User authorization failed", error);
      }
    });

  }

  return (
    <View className={styles.profile}>
      <View className={styles.header}>
        <Image
          className={styles.avatar}
          src={userStore.userInfo?.avatarUrl || defaultUrl}
          mode='aspectFill'
          onClick={handleLogin}
        />
        <View className={styles.userInfo}>
          <Text className={styles.nickname}>{userStore.userInfo?.nickname || '点击注册/登录'}</Text>
          {/* <Text className={styles.userId}>ID: 123456</Text> */}
        </View>
      </View>

      <View className={styles.content}>
        <AtList>
          <AtListItem
            title='个人资料'
            arrow='right'
            onClick={() => { }}
          />
          <AtListItem
            title='消息通知'
            arrow='right'
            onClick={() => { }}
          />
          <AtListItem
            title='帮助中心'
            arrow='right'
            onClick={() => { }}
          />
          <AtListItem
            title='关于我们'
            arrow='right'
            onClick={() => { }}
          />
        </AtList>
      </View>

      <View className={styles.footer}>
        <AtButton
          type='secondary'
          className={styles.logoutBtn}
          onClick={handleLogout}
        >
          退出登录
        </AtButton>
      </View>
    </View>
  )
}))

export default Profile